<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="set" style="height: 100%;">
        <div class="addAttendance">
            <span id="add" @click="addcheck">
                数据导出
            </span>
            <div id="long">
            </div>
            <span id="record" @click="DataExportRecord">
                数据导出记录
            </span>
        </div>
        <div class="dataExBot">
            <div class="bot1">
                审批类型：
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="items in options" :key="items.modelId" :label="items.modelName" :value="items.modelId">
                    </el-option>
                </el-select>
            </div>
            <div class="bot2">
                审批状态：
                <el-select v-model="stateValue" placeholder="请选择">
                    <el-option v-for="item in optionState" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="bot3">
                标题：<input type="text" class="headline" placeholder="请输入标题" v-model="approvalTitle" maxlength="20"/>
            </div>
            <div class="bot4">
                发起时间：
                <el-date-picker @change="setEndDate" v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
                </el-date-picker>
                <div class="xian"></div>
                <el-date-picker @change="setEndDate1" v-model="value2" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
                </el-date-picker>
            </div>
            <div class="bot5">
                完成时间：
                <el-date-picker @change="setEndDate2" v-model="finishvalue1" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
                </el-date-picker>
                <div class="xian"></div>
                <el-date-picker @change="setEndDate3" v-model="finishvalue2" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
                </el-date-picker>
            </div>
            <div class="inquire">
                <div class="dc" @click="exportdata()">导出</div>
                <div class="cx" @click="damand()">查询</div>
            </div>
        <div class="dataTable">
            <div class="unData" v-show="unData">暂无数据</div>
            <div class="main_rightMain" v-show="hasData">
            <div class="noticNav">
                <span>审批标题</span>
                <span>发起时间</span>
                <span>完成时间</span>
                <span>审批人</span>
                <span>审批状态</span>
                <span>操作</span>
            </div>
            <ul>
                <li v-for="(item,index) in items" :key="index">
                    <!-- <p>{{item.title}}</p> -->
                    <div >
                        <div class="noticNavs">
                            <span :title=item.title>{{item.title}}</span>
                            <span>{{item.createTime | Date}}</span>
                            <span v-if="item.finishTime == ''">未完成</span>
                            <span v-else>{{item.finishTime | Date}}</span>
                            <span>{{item.approver}}</span>
                            <span>{{item.state | typeFun}}</span>
                            <span>
                                <p  @click='remove(index)'><img :title='deleteicon' src="../../../../static/img/delete.png" alt=""></p>
                            </span>
                        </div>
                    </div>

                </li>
            </ul>
            <div class="pagination">
       	        <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    small
                    layout="prev, pager, next"
                    :total="totals">
                </el-pagination>
            </div>
        </div>
            </div>
        </div>
        <!-- 确认删除弹出框 -->
        <div class="removeBox ModalsBox" v-show="removeBox">
            <div class="Modals" >
                <div class="modalsTop">
                    确认删除？
                </div>
                <div class="modalsBot" >

                    <div class="details">
                        <div class="detailsOne">该审批单将被删除，删除后不可恢复！</div>

                    </div>
                    <div class="anNiu">
                        <div class="ensure">
                            <a href="javascript:;" @click="confirmDelete()">删除</a>
                        </div>
                        <div class="abolish" @click='abolish'>
                            <a href="javascript:;">取消</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--导出数据提示框-->
        <div class="ModalsBox" v-show="exportDataBox">
            <div class="Modals">
                <div class="modaltitle">休息一下</div>
                <div class="modalcontent">
                    <p>数据正在被导出，请勿关闭浏览器哦</p>
                    <div class="btnBox" style="margin-left:30px;">
                        <input type="button" value="确认" @click='exportDataClick'>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
require("../../../../api/api.js");
import { mapActions } from "vuex";
export default {
  name: "set",
  data() {
    return {
      exportDataBox:false,
      deleteicon:'删除',
      unData:false,
      hasData:false,
      approvalTitle:'',
      value: "",
      stateValue:'',
      finishvalue1:'',
      finishvalue2:'',
      options: [],
      optionState:[
          {
              id:0,
              name:'审批中'
          },
          {
              id:1,
              name:'审批完成'
          },
          {
              id:2,
              name:'已撤回'
          }
      ],
      value1: "",
      value2: "",
      removeBox: false,
      items: [],
      a:'',
      b:'',
      c:'',
      d:'',
      totals: 0,
      approvaId: "",
      currentPage: 1,
      pickerOptions0: {
        disabledDate(time) {
        // console.log(Date.now() - 8.64e7)
        return Date.now() < time.getTime();
        }
      },
    };
  },

  created: function() {
    let self = this;
    self
      .getapprovalDataList({
        current: self.currentPage,
        size: 10,
        oid: sessionStorage.getItem("orgId"),
        mid: "",
        state: "",
        title: "",
        createTimeStart: "",
        createTimeEnd: "",
        finishTimeStart: "",
        finishTimeEnd: ""
      })
      .then(data => {
        if (data.code == "000000") {
          if(data.data == undefined){
              self.unData = true
              self.hasData = false 
          }else{
          if (data.data.records.length == 0) {
              self.unData = true
              self.hasData = false
          } else {
              self.unData = false
              self.hasData = true
            self.items = data.data.records;
            self.totals = data.data.total;
          }
          }
        } else {
          this.$message({
            type: "info",
            message: data.msg
          });
        }
      })
      .catch(msg => {
        this.$message({
          type: "info",
          message: msg.error
        });
      });
    //  获取审批类型
    self
      .getapprovalList({
        oid: sessionStorage.getItem("orgId"),
        access_token: sessionStorage.getItem("accessToken")
      })
      .then(data => {
        if (data.code == "000000") {
         self.options = data.data
        } else {
          this.$message({
            type: "info",
            message: data.msg
          });
        }
      })
      .catch(msg => {
        this.$message({
          type: "info",
          message: msg.statusText
        });
      });
  },
  filters: {
    typeFun(val) {
      if (val == 0) {
        return "审批中";
      } else if(val == 1) {
        return "审批完成";
      }else{
          return '已撤回'
      }
    },
    Date(val) {
          if (val) {
                    var now = new Date(val);
                    var year = now.getYear() - 100;
                    var month = now.getMonth() + 1;
                    month = month > 9 ? month : "0" + month;
                    var date = now.getDate();
                    date = date > 9 ? date : "0" + date;
                    var hour = now.getHours();
                    hour = hour > 9 ? hour : "0" + hour;
                    var minute = now.getMinutes();
                    minute = minute > 9 ? minute : "0" + minute;
                    return "20" + year + "-" + month + "-" + date + " " + hour + ":" + minute;
                } else {
                    return "暂无"
                }
    }
  },
  watch: {},
  methods: {
    exportDataClick(){
      this.exportDataBox = false
    },
    setEndDate(val){
      this.a=val
    },
    setEndDate1(val){
      this.b=val
    },
    setEndDate2(val){
      this.c=val
    },
    setEndDate3(val){
      this.d=val
    },
    // 导出审批数据
    exportdata(){
      let self = this 
      self.exportDataBox =  true
      window.location.href =
        global.datasIp +
        "/api-approval/approval/data/export" 
        +'?oid=' + sessionStorage.getItem('orgId') + '&uid=' + sessionStorage.getItem('userId') 
        + '&mid=' + self.value + '&state=' +  self.stateValue 
        + '&title=' + self.approvalTitle + '&createTimeStart=' + self.value1 + '&createTimeEnd=' 
        + self.value2+ '&finishTimeStart=' +  self.finishvalue1 
        + '&finishTimeEnd=' + self.finishvalue2 + '&access_token=' + sessionStorage.getItem('accessToken')
    },
    // 表单验证
    regex(){
        let self = this
        const number = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g
        if(!number.test(self.approvalTitle)){
            this.$message({
                type:'info',
                message:'标题输入有误，请重新输入！'
            })
            return
        }
        if(self.value1 > self.value2){

        }
    },
    // 数据查询
    damand(){
     let self = this;
     const ronsx = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g
     if(ronsx.test(self.approvalTitle)){
       this.$message({
         type:'info',
         message:'标题输入有误，请重新输入！'
       })
        return
     }
    if(this.value1 !== ''){
        if(this.value2 == ''){
          this.$message({
            type:'info',
            message:'请选择结束时间'
          })
          return
        }
      }
      if(this.value2 !== ''){
        if(this.value1 == ''){
          this.$message({
            type:'info',
            message:'请选择开始时间'
          })
          return
        }
      }
           if(this.finishvalue1 !== ''){
        if(this.finishvalue2 == ''){
          this.$message({
            type:'info',
            message:'请选择结束时间'
          })
          return
        }
      }
      if(this.finishvalue2 !== ''){
        if(this.finishvalue1 == ''){
          this.$message({
            type:'info',
            message:'请选择开始时间'
          })
          return
        }
      }  
     if (this.value1 > this.value2) {
        this.$message("开始时间不可以大于结束时间");
        return;
      } else if (this.value2 - this.value1 > 86400000 * 30) {
        this.$message("查询时间间隔不能大于一个月");
        return;
      } 
     if (this.finishvalue1 > this.finishvalue2) {
        this.$message("开始时间不可以大于结束时间");
        return;
      } else if (this.finishvalue2 - this.finishvalue1 > 86400000 * 30) {
        this.$message("查询时间间隔不能大于一个月");
        return;
      }
      if(self.finishvalue1 < self.value2){
          this.$message({
            type:'info',
            message:'完成时间不能早于发起时间'
          })
          return
      }  
     self
        .getapprovalDataList({
         current: self.currentPage,
          size: 10,
          oid: sessionStorage.getItem("orgId"),
          mid: self.value,
          state: self.stateValue,
          title: self.approvalTitle,
          createTimeStart: self.a,
          createTimeEnd:self.b,
          finishTimeStart: self.c,
          finishTimeEnd: self.d
        })
        .then((data) => {
          if (data.code == "000000") {
              if(data.data == undefined){
                   self.unData = true
              self.hasData = false
                  
              }else{
                if (data.data.records.length == 0) {
                     self.unData = true
              self.hasData = false
                    } else {
                         self.unData = false
              self.hasData = true
                    self.items = data.data.records;
                    self.totals = data.data.total
                    }
              }
                     } else {
            this.$message({
              type: "info",
              message: data.msg
            });
          }
        })
        .catch(msg => {
          this.$message({
            type: "info",
            message: msg.error
          });
        });
    },
    addcheck: function() {
      this.$router.push({
        path: "/home/approve/dataExport"
      });
    },
    DataExportRecord() {
      this.$router.push({
        path: "/home/approve/dataExportRecord"
      });
    },
    abolish() {
      this.removeBox = false;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      let self = this;
      self.currentPage = val;
      self
        .getapprovalDataList({
          current: val,
          size: 10,
          oid: sessionStorage.getItem("orgId"),
          mid: self.value,
          state: self.stateValue,
          title: self.approvalTitle,
          createTimeStart: self.value1,
          createTimeEnd:self.value2,
          finishTimeStart: self.finishvalue1,
          finishTimeEnd: self.finishvalue2
        })
        .then(data => {
          if (data.code == "000000") {
            if (data.data.records.length == 0) {
                self.unData = true
              self.hasData = false 
            } else {
                 self.unData = false
              self.hasData = true
              self.items = data.data.records;
              self.totals = data.data.total
            }
          } else {
            this.$message({
              type: "info",
              message: data.msg
            });
          }
        })
        .catch(msg => {
          this.$message({
            type: "info",
            message: msg.error
          });
        });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    remove(index) {
      this.removeBox = true;
      this.approvaId = this.items[index].id;
    },
    // 确认删除数据列表中的单条数据
    confirmDelete() {
      let self = this;
      self
        .getapprovalDataDelete({
          approvalId: self.approvaId
        })
        .then(data => {
          if (data.code == "000000") {
            this.$message({
              type: "success",
              message: "删除成功！"
            });
            self.removeBox = false;
            self
              .getapprovalDataList({
                current: self.currentPage,
                size: 10,
                oid: sessionStorage.getItem("orgId"),
                mid: self.value,
                state: self.stateValue,
                title: self.approvalTitle,
                createTimeStart: self.value1,
                createTimeEnd:self.value2,
                finishTimeStart: self.finishvalue1,
                finishTimeEnd: self.finishvalue2
              })
              .then(data => {
                if (data.code == "000000") {
                  if (data.data.records.length == 0) {
                       self.unData = true
              self.hasData = false
                  } else {
                       self.unData = false
              self.hasData = true
                    self.items = data.data.records;
                    self.totals = data.data.total;
                  }
                } else {
                  this.$message({
                    type: "info",
                    message: data.msg
                  });
                }
              })
              .catch(msg => {
                this.$message({
                  type: "info",
                  message: msg.error
                });
              });
          } else {
            this.$message({
              type: "info",
              message: data.msg
            });
          }
        })
        .catch(msg => {
          this.$message({
            type: "info",
            message: msg.error
          });
        });
    },
    ...mapActions(["getapprovalDataList", "getapprovalDataDelete",'getapprovalList','getapprovalDataExport'])
  }
};
</script>
<style scoped>
.modalsTop {
  width: 100%;
  height: 64px;
  background-color: #ffffff;
  text-align: center;
  line-height: 64px;
  color: #ffffff;
  font-size: 16px;
  color: #303030;
}

.modalsBot {
  width: 100%;
  height: 128px;
  background-color: #ffffff;
}

.hint {
  width: 100%;
  height: 44px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 24px;
  line-height: 44px;
  color: #303030;
  font-size: 16px;
}

.details {
  width: 100%;
  height: auto;
  margin-top: 14px;
}

.detailsOne {
  padding-left: 56px;
  color: #303030;
  font-size: 14px;
}

.detailsTwo {
  padding-left: 56px;
  padding-top: 8px;
  color: #303030;
  font-size: 14px;
}

.anNiu {
  width: auto;
  height: auto;
  margin-top: 44px;
  text-align: center;
}

.ensure {
  display: inline-block;
  width: 80px;
  height: 34px;
  border-radius: 4px;
  background: #ffffff;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  line-height: 34px;
  margin-right: 23px;
  border: 1px solid #e7744a;
}

.ensure a {
  width: 100%;
  height: 100%;
  display: inline-block;
  color: #e7744a;
  font-size: 16px;
  text-decoration: none;
}

.abolish {
  display: inline-block;
  width: 80px;
  height: 34px;
  border-radius: 4px;
  background: #ffffff;
  text-align: center;
  line-height: 34px;
  margin-left: 23px;
  border: solid 1px #afafaf;
   
}

.abolish a {
  display: inline-block;
  width: 100%;
  height: 100%;
   color: #afafaf;
  font-size: 16px;
  text-decoration: none;
}



#record {
  cursor: pointer;
}

.cx,
.dc {
  margin-right: 8px;
  margin-top: 20px;
  display: inline-block;
  float: right;
  width: 100px;
  height: 30px;
  border: 1px solid #e7744a;
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
  color: #e7744a;
  font-size: 14px;
  cursor: pointer;
}

.cx {
  margin-right: 25px;
}

.xian {
  display: inline-block;
  width: 40px;
  height: 1px;
  background-color: #e7744a;
}

.bot1 {
  display: inline-block;
  margin-left: 22px;
  margin-top: 10px;
}

.bot2 {
  display: inline-block;
  margin-left: 15px;
}

.bot3 {
  display: inline-block;
  margin-left: 60px;
}

.bot4 {
  display: inline-block;
  margin-left: 20px;
  margin-top: 26px;
}

.bot5 {
  display: inline-block;
  margin-left: 48px;
  margin-top: 26px;
}

.headline {
  width: 220px;
  height: 34px;
  border: 1px solid #e7744a;
  padding-left: 12px;
}

.el-input {
  width: 100px;
}

.addAttendance {
  height: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  margin-left: 16px;
  margin-right: 16px;
  padding-top: 20px;
  padding-bottom: 12px;
  color: #303030;
  font-size: 14px;
}

#add {
  color: #e7744a;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}

#long {
  display: inline-block;
  width: 1px;
  height: 14px;
  padding-top: 10px;
  margin-left: -10px;
  background-color: #aeaeae;
}

.dataExBot {
  width: 90%;
  height: auto;
}

.dataTable {
  text-align: center;
  width: 100%;
  height: auto;
  margin-left: 20px;
  margin-top: 70px;
}
.addTitle {
  float: right;
  margin-top: -40px;
  margin-right: 30px;
  cursor: pointer;
  width: 70px;
  height: 30px;
  background-color: #e7744a;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
}
.pagination {
  float: right;
  margin-right: 20px;
}
.main_rightTop p:nth-child(1) {
  color: #303030;
  font-size: 14px;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-left: 44px;
  /* width: calc(100% - 88px); */
  border-bottom: 1px solid #d9d9d9;
}

.main_rightTop {
  width: 100%;
}

.main_rightMain {
  margin-left: 14px;
  width: 100%;
}

.noticNav {
  width: 100%;
  height: 48px;
  line-height: 48px;
  background: #f4f4f6;
  margin-top: 20px;
}
.noticNavs {
  width: 100%;
  height: 48px;
  line-height: 48px;
  /* background: #f4f4f6; */
  /* margin-top: 20px; */
}
.noticNavs span:nth-child(2) p {
  width: 16%;
  height: 40px;
  float: left;
}
.noticNavs span:nth-child(6) p img {
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.noticNavs span:nth-child(1) {
  width: 17%;
  text-align: left;
  padding-left: 24px;
}
.noticNavs span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  float: left;
  width: 16%;
  text-align: center;
}
.noticNav span:nth-child(1) {
  width: 16%;
  text-align: left;
  padding-left: 24px;
}
.noticNav span {
  float: left;
  width: 16%;
  text-align: center;
}
/* .noticNav span:nth-child(1) {
        float: left;
        margin-left: 24px;
    }
    
    .noticNav span:nth-child(2) {
        float: right;
        margin-right: 134px;
    } */
ul li {
  height: 48px;
  border-bottom: 1px solid #d9d9d9;
}
ul li > p {
  height: 48px;
  line-height: 48px;
  margin-left: 24px;
  cursor: pointer;
}
.biaoti {
  float: left;
}

.unread {
  float: left;
  margin-left: 189px;
}
.grayfont {
  color: #8f8e94;
}
.borderStyle {
  cursor: pointer;
  font-size: 12px;
  color: #fcb298;
  width: 48px;
  display: inline-block;
  border: 1px solid #fcb298;
  height: 20px;
  line-height: 20px;
  border-radius: 17px;
  text-align: center;
}
.unData{
    color: #303030;
    font-size: 20px;
    padding-top: 20px;
}
/*弹窗*/

.Modals {
  background: #fff;
  height: 200px;
  width: 324px;
}

.modaltitle {
  height: 34px;
  line-height: 64px;
  text-align: center;
  color: #303030;
  font-size: 16px;
  background: #ffffff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.modalcontent p {
  text-align: center;
  margin-top: 52px;
  margin-bottom: 48px;
}

.btnBox {
  text-align: center;
  margin-top: -10px;
}

.btnBox input {
  width: 80px;
  height: 34px;
  line-height: 34px;
  font-size: 16px;
  color: #fff;
  background: #ffffff;
}

.btnBox input:nth-child(1) {
  margin-right: 30px;
    border: solid 1px #e97449;
    color: #e97449;
}

.btnBox input:nth-child(2) {
      margin-left: 30px;
    border: solid 1px #afafaf;
    color: #afafaf;
}
</style>